<template>
  <div class="optionsContainter">
    <!-- 公司部门选择框组件 -->
    <el-select v-model="value" placeholder="请选择" popper-class="optionsContent" filterable @change="showMessage($event)" style="width:100%">
      <el-option v-for="item in compdepts" :key="item.deptId" :label="item.compName + '-' + item.deptName" :value="[item.compId,item.compName,item.deptId,item.deptName]">
        <el-tooltip class="item" effect="dark" :content="item.compId" placement="right" :disabled="getLength(item.compId) > 14 ? false : true">
          <span style="float: left">{{ item.compName }}</span>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="item.deptName" placement="bottom" :disabled="getLength(item.deptName) > 14 ? false : true">
          <span style="float: left">{{ item.deptName }}</span>
        </el-tooltip>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'orgTree',
  // 父组件传值子组件
  props: {
    // 部门数据
    compdepts: {
      type: Array
    },
    // 公司数据
    comps: {
      type: Array
    },
    // 编辑默认数据
    selcpms: {
      type: Array
    }
  },
  created () {
    this.setCompDept();
  },
  data () {
    return {
      // 超出长度省略
      disabled: true,
      // 公司部门显示数据
      options: [],
      // 选择默认值
      value: ''
    };
  },
  mounted () {
    // 保留数据源
    this.copy = Object.assign(this.options);
  },
  methods: {
    // 传递父组件所选公司部门信息
    showMessage (e) {
      this.$emit('selcompdepts', e);
    },
    // 获得输入框中字符长度
    getLength (val) {
      let str = val;
      let bytesCount = 0;
      for (let i = 0, n = str.length; i < n; i++) {
        let c = str.charCodeAt(i);
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          bytesCount += 1;
        } else {
          bytesCount += 2;
        }
      }
      return bytesCount;
    },
    // 设置选中数据
    setCompDept () {
      let _self = this;
      _self.compdepts.map(item => {
        _self.comps.map(key => {
          if (item.compId === key.compId) {
            item.compName = key.compName;
          }
        });
      });
    }
  },
  // 监听
  watch: {
    // 选择数据回显格式
    selcpms: {
      immediate: true,
      handler (newVal, oldVal) {
        if (this.selcpms.length > 0) {
          let ed = this.selcpms[0] + '-' + this.selcpms[1];
          this.value = ed;
        } else {
          this.value = '';
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
